import React, { useEffect, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { Divider, Card, notification, Spin } from 'antd';
import { connect, useSelector } from 'umi';
import { fetchingAddGoodsListLoading } from '../models/goods.js';
import GoodsList from '@/components/GoodsList';
import GoodsForm from '@/components/GoodsForm';
// import styles from './index.less';

const Increase = (props) => {
  const { list, dispatch } = props;
  // console.log(list);
  // 数据倒序显示
  const reversedData = [...list].reverse();
  const loadingResult = useSelector(fetchingAddGoodsListLoading);

  useEffect(() => {
    dispatch({
      type: 'goods/getAllGoodsList',
    });
  }, [dispatch]);

  const columns = [
    {
      title: 'Id',
      dataIndex: 'id',
    },
    {
      title: 'Image',
      dataIndex: 'goods_image',
      render: (text) => <img src={text} alt="" style={{ width: '40px', height: '40px' }} />,
    },
    {
      title: 'Name',
      dataIndex: 'goods_name',
      render: (text) => <a>{text}</a>,
    },
    {
      title: 'Price_max',
      dataIndex: 'goods_price_max',
    },
    {
      title: 'Line_price_max',
      dataIndex: 'line_price_max',
    },
  ];

  const handleFormSubmitAdd = (formData) => {
    // 处理表单数据添加
    console.log('表单数据：', formData);
    dispatch({
      type: 'goods/addGoods',
      payload: formData,
    }).then(() => {
      notification.success({
        message: 'Increase Success!',
        className: 'custom-class',
        description: 'The product has been added to the list.',
        // onClick: () => {
        //   console.log('Notification Clicked!');
        // },
        duration: 2.5,
      });
    });
  };

  return (
    <PageContainer title={false}>
      <Card title="增加商品">
        <GoodsForm onHandleAdd={handleFormSubmitAdd} />
      </Card>
      <Divider orientation="left">商品列表</Divider>
      {loadingResult ? <Spin size="large" /> : <GoodsList list={reversedData} columns={columns} />}
    </PageContainer>
  );
};

const mapStateToProps = ({ goods }) => {
  return {
    ...goods,
  };
};
export default connect(mapStateToProps)(Increase);
